<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div id="bannerGroup" th:fragment="banner-group">

    <!-- banners -->
    <div id="banners">
        <div class="banners-title">
            <div class="banners-title-big"
                 th:if="${not #strings.isEmpty(theme.config.top.BannerLeft.bannersTitleBig)}"
                 th:utext="${theme.config.top.BannerLeft.bannersTitleBig}"></div>
            <div class="banners-title-small"
                 th:if="${not #strings.isEmpty(theme.config.top.BannerLeft.bannersTitleSmall)}"
                 th:utext="${theme.config.top.BannerLeft.bannersTitleSmall}"></div>
        </div>

        <div class="tags-group-all">

            <!--  banners 使用默认值-->
            <div class="tags-group-wrapper" th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
                    </div>
                </div>
            </div>

            <!--  banners 使用默认值-->
            <div class="tags-group-wrapper"
                 th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'techStack')}"
                 th:with="techs = ${theme.config.top.BannerLeft.techStack}">
                <th:block th:each="tech,iterStat : ${techs}">
                    <div class="tags-group-icon-pair" th:if="${iterStat.odd}">
                        <div class="tags-group-icon"
                             th:style="'background:' + ${techOdd.background}"
                             th:with="techOdd = ${techs.get(iterStat.index - 1)}">
                            <img th:src="@{${techOdd.url}}" th:title="${techOdd.name}">
                        </div>

                        <div class="tags-group-icon"
                             th:style="'background:' + ${techEven.background}"
                             th:with="techEven = ${tech}">
                            <img th:src="@{${techEven.url}}" th:title="${techEven.name}">
                        </div>
                    </div>
                </th:block>
            </div>
        </div>
        <!-- 随机前往一篇文章 -->
        <a id="banner-hover" onclick="toRandomPost()">
            <span class="bannerText">随便逛逛</span>
            <i class="iconfont icon-arrow-right banner-righticon"></i>
        </a>
    </div>

    <!-- category -->
    <div class="categoryGroup">
        <th:block th:if="${not #lists.isEmpty(theme.config.top.BannerLeft.categoryGroup)}" th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
            <div class="categoryItem">
                <a class="categoryButton CB1 bikan" th:href="@{${groups[0].url}}">
                    <span class="categoryButtonText">[[${groups[0].title}]]</span><i th:class="${groups[0].icon}"></i>
                </a>
            </div>
            <div class="categoryItem">
                <a class="categoryButton remen" th:href="@{${groups[1].url}}">
                    <span class="categoryButtonText">[[${groups[1].title}]]</span><i th:class="${groups[1].icon}"></i>
                </a>
            </div>
            <div class="categoryItem">
                <a class="categoryButton shiyong" th:href="@{${groups[2].url}}">
                    <span class="categoryButtonText">[[${groups[2].title}]]</span><i th:class="${groups[2].icon}"></i>
                </a>
            </div>
        </th:block>
    </div>

    <style th:if="${not #lists.isEmpty(theme.config.top.BannerLeft.categoryGroup)}" th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
        a.categoryButton.bikan {
            background: linear-gradient(to right, [[${groups[0].colorOneLight}]], [[${groups[0].colorTwoLight}]]);
            background-size: 200%;
        }

        a.categoryButton.remen {
            background: linear-gradient(to right, [[${groups[1].colorOneLight}]], [[${groups[1].colorTwoLight}]]);
            background-size: 200%;
        }

        a.categoryButton.shiyong {
            background: linear-gradient(to right, [[${groups[2].colorOneLight}]], [[${groups[2].colorTwoLight}]]);
            background-size: 200%;
        }

        [data-theme=dark] a.categoryButton.bikan {
            background: linear-gradient(to right, [[${groups[0].colorOneDark}]], [[${groups[0].colorTwoDark}]]);
            background-size: 200%;
        }

        [data-theme=dark] a.categoryButton.remen {
            background: linear-gradient(to right, [[${groups[1].colorOneDark}]], [[${groups[1].colorTwoDark}]]);
            background-size: 200%;
        }

        [data-theme=dark] a.categoryButton.shiyong {
            background: linear-gradient(to right, [[${groups[2].colorOneDark}]], [[${groups[2].colorTwoDark}]]);
            background-size: 200%;
        }
    </style>

    <script th:inline="javascript">

        function toRandomPost() {
            // 随机跳转首页的一篇文章
            // 后续改成跳转全站的文章，可以从 sitemap 中获取所有文章
            let posts = [[${posts}]];

            let datum = posts.total < posts.size ? posts.total : posts.size;

            let number = Math.floor(Math.random() * datum);

            let post = posts.items[number];

            // 当前窗口打开
            //window.location.href = post.status.permalink;
            pjax.loadUrl(post.status.permalink)
            // window.open(post.status.permalink);
        }

    </script>

</div>
</html>
